<template>
  <div class="tooltip">
    <el-tooltip class="item" :disabled="!showTip" effect="light" :content="tipContent" placement="top-start">
      <div class="designer-inner">
        <div ref="isOverflow" class="designer-inner-info" type="textarea">
          <slot />
        </div>
      </div>
    </el-tooltip>
  </div>
</template>
<script>
export default {
  name: 'Video',
  props: {
    tipContent: {
      type: String,
      default: ''
    },
  },
  data () {
    return {
      showTip: false
    }
  },
  mounted () {
    this.loadShowTip()
    window.addEventListener('resize', this.debounce(this.loadShowTip, 500))
  },
  methods: {
    debounce(fn, delay) {
      let timer;
      return function () {
        if (timer) { clearTimeout(timer); }
        timer = setTimeout(() => { fn(); }, delay);
      }
    },
    loadShowTip() {
      this.showTip = this.$refs.isOverflow.clientWidth < this.$refs.isOverflow.scrollWidth
      console.log(this.showTip)
    }
  }
}
</script>
<style lang="scss" scoped>
  .designer-inner-info {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>